<template>
  <el-form :model="detailForm" ref="detailForm" label-position="right" :class="isEdit?'':'formItem'" class="elForm">

    <!--    <div class="table-title-wrap justify-end">-->

    <!--      <el-button>批量下载表格</el-button>-->
    <!--      <el-button>批量下载合格证</el-button>-->
    <!--      <el-button>批量下载发票</el-button>-->

    <!--    </div>-->

    <el-card class="box-card" shadow="never">
      <div slot="header" class="header-card">
        <span class="header-card-title">基础信息</span>
      </div>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="车辆总台数:" style="width: 100%;">
            <!-- <el-input v-if="isEdit" v-model="detailForm.carNum" disabled style="width: 100%;"></el-input> -->
            <span v-if="isEdit">{{ detailForm.carNum }}</span>
            <span v-else>{{ detailForm.carNum }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合计费用:">
            <!-- <el-input v-if="isEdit" v-model="detailForm.totalPrice" disabled></el-input> -->
            <span v-if="isEdit">{{ format_thousand(detailForm.totalPrice) }}</span>
            <span v-else>{{ format_thousand(detailForm.totalPrice) }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24" style="margin-top: 16px">
        <el-col>
          <el-table size="mini" :data="detailForm.dtoList" border style="width: 100%" v-if="detailForm.dtoList"
                    :header-cell-class-name="headerClass">
            <el-table-column align="center" label="采购编号" prop="purchaseNo" min-width="120px" show-overflow-tooltip>
              <template slot-scope="scope">
                <e-button size="mini" type="text" @click="handlePurchaseNo(scope.row)">
                  {{ scope.row.purchaseNo|filterNull }}
                </e-button>
              </template>
            </el-table-column>
            <el-table-column align="center" label="车架号" prop="vinNo" width="150"/>
            <el-table-column align="center" label="合格证">
              <template #default="{row}">
                <el-popover placement="right" trigger="click">
                  <image-common v-model="row.qualifiedCardOss" :disabled="true" :up-type="2"/>
                  <el-button type="text" slot="reference">查看</el-button>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column align="center" label="发票">
              <template #default="{row}">
                <el-popover placement="right" v-if="row.invoiceOss" trigger="click">
                  <image-common v-model="row.invoiceOss" :disabled="true" :up-type="2"/>
                  <el-button type="text" slot="reference">查看</el-button>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column align="center" label="车型" prop="modelName" min-width="150"/>

            <el-table-column align="center" label="采购价" prop="purchasePrice">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'dtoList.'+$index+'.purchasePrice'"
                              :rules="{required: true,trigger: 'blur'}">
                  <el-input v-if="!row.purchasePrice" v-model="row.purchasePrice" v-thousand
                            @change="changeTable(row, $index, 'purchasePrice')" size="mini"/>
                  <span v-else>{{ format_thousand(row.purchasePrice) }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="购置税费用" prop="purchaseTaxPrice">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'dtoList.'+$index+'.purchaseTaxPrice'"
                              :rules="{required: true,trigger: 'blur'}">
                  <el-input v-if="!row.purchaseTaxPrice" v-model="row.purchaseTaxPrice" v-thousand
                            @change="changeTable(row, $index, 'purchasePrice')" size="mini"/>
                <span v-else>{{ format_thousand(row.purchaseTaxPrice) }}</span>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-col>

      </el-row>
    </el-card>

  </el-form>
</template>

<script>
export default {
  name: 'purchaseBasicsInfo',

  model: {
    prop: 'detailForm',
    event: 'update:detailForm',
  },

  props: {
    detailForm: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
  },

  computed: {
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool
    }
  },
  watch: {},

  data() {
    return {
      headerStar:["purchasePrice","purchaseTaxPrice"]
    };
  },

  created() {
    this.handleCount()
  },
  mounted() {
  },
  methods: {
    handlePurchaseNo(row) {
      this._toPage({
        name: 'PurchaseAdd',
        query: {purchaseOrderId: row.purchaseOrderId, type: 'detail', pageType: '采购详情'}
      })
    },

    handleCount() {
      this.detailForm.totalPrice = 0
      this.detailForm.dtoList.forEach(item => {
        this.detailForm.totalPrice += Number(item.purchaseTaxPrice)
      })
    },


    changeTable(row, key, field) {
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;
      if (row[field]) {
        if (msg.test(Number(row[field]))) {
          if (Number(row[field]) >= 0) {
            let _value = row[field].toString().match(/^\d+(?:\.\d{0,2})?/)[0];
            row[field] = _value;
          } else {
            row[field] = "";
          }
        } else {
          row[field] = "";
        }
      }
    },

    headerClass({row, column, rowIndex, columnIndex}) {
      for (let i = 0; i < row.length; i++) {
        if (this.headerStar.includes(row[i].property) && i == columnIndex) {
          return "header-class";
        }
      }
    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.detailForm.validate((valid) => {
          if (valid) {
            resolve()
          } else {
            reject()
          }
        });
      })
    },


  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/cwgd/formScss.scss";

.elForm {
  .el-form-item {
    width: 100%;
  }
}

::v-deep.formTable {
  margin-bottom: 0;
  width: 100%;
}

::v-deep .header-class {
  .cell::before {
    content: "*";
    color: red;
    padding-right: 2px;
    font-size: 14px;
  }
}
</style>


